<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>comment</title>
  <script src="/vue.js"></script>
</head>
<body>
  <div id="root">
    <c-list :list="movies"></c-list>
    <c-form @on-receive="handleReceive"></c-form>
  </div>
  <script>

    Vue.component('c-button', {
      props: ['title'],
      template: `
        <button @click="handleClick">{{title}} <slot></slot></button>
      `,

      methods: {
        handleClick() {
          this.$emit('on-click')
        }
      },
    })

    Vue.component('c-li', {
      props: ['item'],
      template: `
        <li>{{item.nm}} <c-button @on-click="handleEnterClick" title="进入"></c-button></li>
      `,
      methods: {
        handleEnterClick() {
          window.open('https://m.maoyan.com', '_blank')
        }
      },
    })

    Vue.component('c-list', {
      props: ['list'],
      template: `
        <ul>
          <c-li 
            :item="li" 
            v-for="li in list"
            :key="li.id"
          ></c-li>
        </ul>
      `
    })

    Vue.component('c-form', {
      data() {
        return {
          movieName: ''
        }
      },

      template: `
        <div>
          <textarea v-model="movieName" cols="30" rows="10"></textarea>
          <br/>
          <c-button @on-click="handleSubmit">提交</c-button>
        </div>
      `,

      methods: {
        handleSubmit() {
          this.$emit('on-receive', this.movieName)
          this.movieName = ''
        }
      },
    })

    var vm = new Vue({
      el: '#root',

      created() {
        // this.list = []
      },

      data: {
        list: []
      },

      computed: {
        movies() {
          return this.list.slice(0, 10)
        }
      },

      mounted() {
        fetch('http://localhost:8080/api/movies/list')
          .then(response => response.json())
          .then(result => {
            this.list = result.data
          })
      },

      methods: {
        handleReceive(movie) {
          this.list.unshift({
            id: new Date().getTime(),
            nm: movie
          })
        }
      },
    })
  </script>
</body>
</html>